<template>
  <div class="container">
    <div class="line1">
      <div v-for="item in line1Data" :key="item.title" class="item">
        <div class="title">{{ item.title }}</div>
        <img :src="getDynamicImage(item.img)" />
      </div>
    </div>
    <div class="title">数字教材与教学资源<span></span></div>
    <div class="line2">
      <div @click="goto(1)" class="more">
        更多 <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <div class="list">
      <div @click="handleDetail(item)" v-for="item in list1" :key="item" class="item">
        <img src="/src/assets/images/kc.png" alt="" />
        <div class="title1">
          <text class="sle">{{ item.resName }}</text>
          <!-- <el-tag :type="typesTag[item.type]">{{ types[item.type] }}</el-tag> -->
        </div>
        <div class="info sle">{{ item.remark }}</div>
        <div class="pub">
          <span>{{ item.publisher }}</span>
          <span>{{ transformDate(item.uploadTime, "local", "YYYY-MM-DD") }}</span>
        </div>
        <div class="bottom">
          <div><img src="/src/assets/images/zan.png" alt="" />{{ item.starNum }}</div>
          <div><img src="/src/assets/images/view.png" alt="" />{{ item.watchNum }}</div>
        </div>
      </div>
    </div>
    <div class="title">教师教学案例<span></span></div>
    <div class="line2">
      <div @click="goto(2)" class="more">
        更多 <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <div class="list">
      <div @click="handleDetail(item)" v-for="item in list2" :key="item" class="item">
        <img src="/src/assets/images/kc.png" alt="" />
        <div class="title1">
          <text class="sle">{{ item.resName }}</text>
          <el-tag :type="typesTag[item.type]">{{ types[item.type] }}</el-tag>
        </div>
        <div class="info sle">{{ item.remark }}</div>
        <div class="pub">
          <span>{{ item.author }}</span>
          <span>{{ transformDate(item.uploadTime, "local", "YYYY-MM-DD") }}</span>
        </div>
        <div class="bottom">
          <div><img src="/src/assets/images/zan.png" alt="" />{{ item.starNum }}</div>
          <div><img src="/src/assets/images/view.png" alt="" />{{ item.watchNum }}</div>
          <div><img src="/src/assets/images/xz.png" alt="" />{{ item.downloadNum }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getResourceList } from "@/api/modules/wl.js";
import { transformDate } from "@/utils";

const getDynamicImage = name => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href;
};
const types = {
  1: "音视频",
  2: "课程包",
  3: "数字教材"
};
const typesTag = {
  1: "primary",
  2: "warning",
  3: "success"
};
const router = useRouter();

const line1Data = [
  {
    title: "网络课程",
    img: "resource1.png",
    link: ""
  },
  {
    title: "名师讲堂",
    img: "resource2.png",
    link: ""
  },
  {
    title: "微课堂",
    img: "resource3.png",
    link: ""
  }
];
const list1 = ref([]);
const list2 = ref([]);
onMounted(() => {
  getList1();
  getList2();
});
function handleDetail(item) {
  console.log("handleDetail");
  localStorage.setItem("resourceDetail", JSON.stringify(item));
  router.push(`/resourceDetail/index`);
}
function getList1() {
  const params = {
    pageNo: 0,
    pageSize: 8,
    kind: 1
  };
  getResourceList(params).then(res => {
    list1.value = res.rows.list;
  });
}
function getList2() {
  const params = {
    pageNo: 0,
    pageSize: 8,
    kind: 2
  };
  getResourceList(params).then(res => {
    list2.value = res.rows.list;
  });
}
function goto(index) {
  console.log(index);
  router.push("/resourceList/index?type=" + index);
}
</script>
<style lang="scss" scoped>
.container {
  width: 1618px;
  margin: 46px auto;
  .line1 {
    display: flex;
    justify-content: space-between;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 428px;
      height: 196px;
      background: linear-gradient(0deg, #ffffff 0%, #bfdbff 100%);
      border: 1px solid #e8f2ff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
      .title {
        margin-right: 30px;
        font-size: 30px;
        font-weight: 700;
        color: #1981ff;
      }
      img {
        width: 204px;
        height: 204px;
        transform: translateY(-10px);
      }
    }
  }
  .title {
    position: relative;
    z-index: 2;
    margin: 42px 0 0;
    font-size: 28px;
    font-weight: 700;
    color: #1981ff;
    text-align: center;
    span {
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: 1;
      width: 120px;
      height: 14px;
      background-color: #d2e3ff;
      border-radius: 4px;
      opacity: 0.5;
      transform: translateX(-50%);
    }
  }
  .line2 {
    display: flex;
    justify-content: end;
  }
  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 36px;
    color: #267eff;
    cursor: pointer;
    border: 1px solid #267eff;
    border-radius: 18px;
  }
  .list {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;

    // height: 791px;
    padding: 30px 40px;
    margin-top: 18px;
    background-color: #e7f2ff;
    border: 1px solid #e8f2ff;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    .item {
      box-sizing: border-box;
      width: 356px;
      height: 340px;
      padding: 10px;
      cursor: pointer;
      background-color: #ffffff;
      border-radius: 20px;
      &:hover {
        box-shadow: 0 0 16px 8px rgb(153 191 255 / 60%);
      }
      img {
        width: 336px;
        height: 180px;
        border-radius: 20px;
      }
      .title1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #1981ff;
      }
      .info {
        margin: 10px 0 20px;
        font-size: 14px;
        color: #3963a6;
      }
      .pub,
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
        color: #3963a6;
        img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
          transform: translateY(2px);
        }
      }
    }
  }
}
</style>
